<template>
  <el-container>
    <!-- 顶部导航栏 -->
    <el-header>
      <div class="home_header">
        <!-- <img src="../assets/heima.png" alt="">-->
        <span>文件转化服务</span>
        <div class="getChange" @click="getChange">
          <span>|||</span>
        </div>
      </div>
      <!-- <el-button type="info" @click="btnOut">退出</el-button> -->
    </el-header>
    <!-- 页面主题区域 -->
    <el-container>
      <!-- 侧边栏导航 -->
      <el-aside :width="getCollapse ? '64px' : '200px'" class="el-aside">

        <!-- 侧边栏菜单区域 -->
        <el-menu
          class="el-menu"
          background-color="#fff"
          text-color="#000000"
          active-text-color="blue"
          :unique-opened="true"
          :collapse="getCollapse"
          :collapse-transition="false"
          router
          :default-active="activePath"
        >
            <el-menu-item index="home">
                <i class="el-icon-s-home"></i>
                <span slot="title">首页</span>
            </el-menu-item>
            <!-- 一级菜单 -->
            <el-submenu  v-for="item in sideMenu" :key="item.id" :index="item.id +''">
                <!-- 模板区域 -->
                <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-place"></i>
                <!-- 文本 -->
                <span>{{ item.authName }}</span>
                </template>
                <!-- 二级菜单 -->
                <el-menu-item v-for="subItem in item.children" :key="subItem.id" :index="'/'+subItem.path" @click="getActive('/'+subItem.path)">
                <i :class="sideIcon[subItem.id]"></i>
                <!-- 文本 -->
                <span>{{ subItem.authName }}</span>
                </el-menu-item>
            </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 右侧主体区域 -->
      <el-main>
        <!-- 路由占位符 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>

</template>

<script>
export default {
  data() {
    return {
      // 左侧菜单数据
      sideMenu: [],
      sideIcon: {
        '2-1': 'fa fa-file-word-o',
        '2-2': 'fa fa-file-word-o',
        '2-3': 'fa fa-file-pdf-o',
        '2-4': 'fa fa-file-archive-o',
        '2-5': 'fa fa-file-archive-o'
      },
      // 是否折叠
      getCollapse: false,
      // 被激活的链接地址
      activePath: ''
    }
  },
  // 生命周期函数，一进入页面就自动加载
  created() {
    this.getSideMenu()
    this.activePath = window.sessionStorage.getItem('active')
  },
  methods: {
    btnOut() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    // 获取所有的菜单
    async getSideMenu() {
    //   const { data: res } = await this.$http.get('menus')
    //   if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
    //   this.$message.success(res.meta.msg)
    let menu = [
            {
                "id":"2",
                "authName":"转换服务",
                "children":[
                    {
                        "id":"2-1",
                        "authName":"word转pdf",
                        "path": "wordToPdf"
                    },
                    {
                        "id":"2-2",
                        "authName":"word转ofd",
                        "path": "wordToOfd"
                    },
                    {
                        "id":"2-3",
                        "authName":"pdf转ofd",
                        "path": "pdfToOfd"
                    },
                    {
                        "id":"2-4",
                        "authName":"ofd转pdf",
                        "path": "ofdToPdf"
                    }
                    
                ]
            }
        ]


      this.sideMenu = menu
    },
    // 点击按钮，切换菜单的折叠和展开
    getChange() {
      this.getCollapse = !this.getCollapse
    },
    // 保持链接的激活状态
    getActive(url) {
      window.sessionStorage.setItem('active', url)
      this.activePath = url
    }
  }
}
</script>

<style lang="scss" scoped>
    .el-container {
        height: calc(100vh );
        border-right: 1px solid #e6e6e6;
        
    }
    .getChange {
        font-size: 18px;
        color: white;
        text-align: center;
        line-height: 36px;
        letter-spacing: 0.2em;
        cursor: pointer;
    }
    .el-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 0;
        background-color: #1890ff;

        .home_header {
            display: flex;
            align-items: center;
            span {
               padding-left: 16px;
               font-size: 20px;
               color: #fff;
            }
        }

    }
    .el-container {
        background-color: #1890ff;
    }
    .el-aside{
        text-align: left;
        border-right: 1px solid #e6e6e6;
        list-style: none;
        position: relative;
        margin: 0;
        padding-left: 0;
        background-color: #fff; 
        overflow: hidden;
    }
    .el-menu {
        border-right: 1px solid #e6e6e6;
        list-style: none;
        position: relative;
        margin: 0;
        padding-left: 0;
        background-color: #fff;
    }
    .el-main {
        background-color: #fff;
    }
    .iconfont {
        padding-right: 6px;
    }
</style>
